{extend name="layout/base"}

{block name="content"}
<style type="text/css">
    .treeTable-icon .layui-icon-layer{
        display: none;
    }
</style>
<div class="list_top">
    <div class="layui-inline">
        <input class="layui-input" name="key" id="key" placeholder="请输入权限名称">
    </div>
    <button class="layui-btn" id="search">搜索</button>
    <button class="layui-btn" id="add" data-type="reload"><i class="layui-icon">&#xe608;</i>添加</button>
</div>

<table id="table1" class="layui-table" lay-filter="table"></table>

<script type="text/html" id="tool">
    <a class="layui-btn layui-btn-sm" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
    <a class="layui-btn layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
</script>

<script type="text/html" id="route">
    <div style="word-wrap:break-word">{{d.purview_route}}</div>
</script>

<script type="text/html" id="addhtml">
    <div class="purvrew">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">权限名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="purview_name" required  lay-verify="required" placeholder="请输入权限名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权限路径：</label>
                <div class="layui-input-block">
                    <textarea name="purview_route" placeholder="请输入权限路径" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="purvrewAdd">添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</script>
<script>
    layui.use(['jquery', 'table', 'layer', 'form'], function ($, table, layer, form) {
        // 渲染表格
        var opt = {
            elem: '#table1',
            url: "{:url('')}",
            method: 'post',
            page: true,
            toolbar: true,
            cols: [[
                {field: 'purview_id', title: 'ID'},
                {field: 'purview_name', title: '名称'},
                {field: 'purview_route', height: 84, title: '路由', templet: '#route'},
                {title: '操作', toolbar: '#tool'}
            ]],
            where: {}
        }, tabIns1 = table.render(opt);
        // 添加栏目
        $('#add').on('click', function () {
            layer.open({
                type: 1,
                area: ['50%', '50%'],
                title: '添加',
                content: $('#addhtml').html()
            })
        })
        //添加栏目数据提交
        form.on('submit(purvrewAdd)', function(data){
            $.ajax({
                url:"{:url('add')}",
                method: 'post',
                data: data.field,
                success: function (res) {
                    console.log(res)
                },
                error: function (res) {
                    console.log(res)
                }
            })
            // return false
        });

        //列表操作
        var layerEdit;
        table.on('tool(table)', function (obj) {
            var id = obj.data.purview_id;
            switch (obj.event) {
                case 'del':
                    layer.confirm('确定要删除吗', function (index) {
                        $.get("{:url('del')}", {id: id});
                        layer.close(index);
                        location.reload()
                    });
                    break;
                case 'edit':
                    layerEdit = layer.open({
                        type: 1,
                        area: ['50%', '50%'],
                        title: '编辑',
                        content: `<div class="purvrew"><form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label">权限名称：</label><div class="layui-input-block"><input type="hidden" name="purview_id" value= ${obj.data.purview_id}><input type="text" value= ${obj.data.purview_name} name="purview_name" required  lay-verify="required" placeholder="请输入权限名称" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">权限路径：</label><div class="layui-input-block"><textarea name="purview_route" placeholder="请输入权限路径" class="layui-textarea">${obj.data.purview_route}</textarea></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="purvrewEdit">编辑</button></div></div></form></div>`
                    })
                    break;
                default:
                    break;
            }
        });
        form.on('submit(purvrewEdit)', function (data) {
            $.ajax({
                url: "{:url('edit')}",
                method: 'post',
                data: data.field,
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg(res.msg);
                        location.href="{:url('lists')}"
                    } else {
                        layer.msg(res.msg);
                        // layer.close(layerEdit)
                    }
                },error: function (err) {
                    layer.msg(err.msg)
                }
            })
            return false;
        })

    });
</script>
{/block}
